<template>

    <div v-loading="loading"
         element-loading-text="正在玩命加载"
    >
        <ul class="title-project">
            <li class="title-li" title="Test API Project">
                <b>{{projectInfo.name}}</b>
                <b class="desc-li">{{projectInfo.desc}}</b>
            </li>
        </ul>

        <ul class="project_detail">
                <li class="pull-left">
                    <router-link :to="id>0?'/fastrunner/api_record/'+ id:''" style="text-decoration: none; display: block; height: 100%;">
                        <p class="title-p"><i class="iconfont">&#xe74a;</i> &nbsp;{{projectInfo.api_count}} 个接口</p>
                        <p class="desc-p">接口总数</p>
                    </router-link>
                </li>

            <li class="pull-left">
                <router-link :to="id>0?'/fastrunner/auto_test/'+ id:''" style="text-decoration: none; display: block; height: 100%;">
                    <p class="title-p"><i class="iconfont">&#xe6da;</i> &nbsp;{{projectInfo.case_count}} 个用例</p>
                    <p class="desc-p">用例集总数</p>
                </router-link>
            </li>

            <li class="pull-left">
                <router-link :to="id>0?'/fastrunner/record_config/' + id:''" style="text-decoration: none; display: block; height: 100%;">
                    <p class="title-p"><i class="iconfont">&#xee32;</i> &nbsp;{{projectInfo.config_count}} 套配置</p>
                    <p class="desc-p">配置总数</p>
                </router-link>
            </li>

            <li class="pull-left">
                <router-link :to="id>0?'/fastrunner/global_env/' + id:''" style="text-decoration: none; display: block; height: 100%;">
                    <p class="title-p"><i class="iconfont">&#xe692;</i> &nbsp;{{projectInfo.variables_count}} 对变量</p>
                    <p class="desc-p">全局变量对数</p>
                </router-link>
            </li>
        </ul>

        <ul class="project_detail">
            <li class="pull-left">
                <router-link :to="id>0?'/fastrunner/host_ip/' + id:''" style="text-decoration: none; display: block; height: 100%;">
                    <p class="title-p"><i class="iconfont">&#xe609;</i> &nbsp;{{projectInfo.host_count}} 套环境</p>
                    <p class="desc-p">环境总数</p>
                </router-link>
            </li>

            <li class="pull-left">
                <router-link :to="id>0?'/fastrunner/tasks/' + id:''" style="text-decoration: none; display: block; height: 100%;">
                    <p class="title-p"><i class="iconfont">&#xe61e;</i> &nbsp;{{projectInfo.task_count}} 项任务</p>
                    <p class="desc-p">定时任务个数</p>
                </router-link>
            </li>

            <li class="pull-left">
                <router-link :to="'/fastrunner/reports/' + id" style="text-decoration: none; display: block; height: 100%;border: solid">
                    <p class="title-p"><i class="iconfont" style="font-size:35px;color: #8b1014;">&#xe66e;</i> &nbsp;{{projectInfo.report_count}} 个报告</p>
                    <p class="desc-p">测试报告总数(保留最近5天)</p>
                </router-link>
            </li>


        </ul>


    </div>
</template>

<script>
    export default {
        name: "ProjectDetail",
        data() {
            return {
                projectInfo: {},
                loading: true,
                id: ''
            }
        },
        methods: {
            getProjectDetail() {
                const pk = this.$route.params.id;
                this.id = pk;
                this.$store.commit('setPid', this.id);
                this.$api.getProjectDetail(pk).then(res => {
                    if (res.status === 200){
                        this.projectInfo = res.data;
                    }
                    this.loading = false;
                })
            }
        },
        mounted() {
             if (!this.$route.params.id) {
                this.$route.params.id = 0;
            }
            this.getProjectDetail();
        }
    }
</script>

<style scoped>


    .desc-p {
        padding-top: 10px;
        font-size: 12px;
        color: #b6b6b6;
    }

    .title-p {
        font-size: 18px;
        margin-top: 10px;
    }

    .title-project li a {
        font-size: 12px;
        text-decoration: none;
        color: #a3a3a3;
        margin-left: 20px;

    }

    .pull-left {
        float: left;
        margin-left: 10px;
    }

    .project_detail li {
        margin-top: 10px;
        text-indent: 20px;
        display: flex;
        height: 90px;
        width: calc(20% - 1.5px);
        border: 1px solid #ddd;
        flex-direction: column;
    }

    .project_detail {
        height: 100px;
        margin-top: 20px;
    }

    .title-project {
        margin-top: 40px;
        margin-left: 10px;
    }

    ul li {
        list-style: none;
    }

    .title-li {
        font-size: 24px;
        color: #607d8b;
    }

    .desc-li {
        margin-top: 10px;
        color: #b6b6b6;
        font-size: 14px;
    }
</style>
